import React from 'react'
import { List ,Avatar,Progress} from "antd"
import { useRequest } from "ahooks"
import { addFakeList, queryFakeList, removeFakeList, updateFakeList } from './service';
import type { BasicListItemDataType } from './data.d';
import moment from 'moment';
import styles from './style.less';


export default function index() {
  const {
    data: listData,
    loading,
    mutate,
  } = useRequest(() => {
    return queryFakeList({
      count: 50,
    });
  });

  const { run: postRun } = useRequest(
    (method, params) => {
      if (method === 'remove') {
        return removeFakeList(params);
      }
      if (method === 'update') {
        return updateFakeList(params);
      }
      return addFakeList(params);
    },
    {
      manual: true,
      onSuccess: (result) => {
        mutate(result);
      },
    },
  );

  // console.log(listData);
  const list = listData?.data.list || [];



  const paginationProps = {
    showSizeChanger: true,
    showQuickJumper: true,
    pageSize: 5,
    total: list.length,
  };

  const ListContent = ({
    data: { owner, createdAt, percent, status },
  }: {
    data: BasicListItemDataType;
  }) => (
    <div className={styles.listContent}>
      <div className={styles.listContentItem}>
        <span>Owner</span>
        <p>{owner}</p>
      </div>
      <div className={styles.listContentItem}>
        <span>开始时间</span>
        <p>{moment(createdAt).format('YYYY-MM-DD HH:mm')}</p>
      </div>
      <div className={styles.listContentItem}>
        <Progress percent={percent} status={status} strokeWidth={6} style={{ width: 180 }} />
      </div>
    </div>
  );

  return (
    <div>
      <List
        size="large"
        rowKey="id"
        loading={loading}
        pagination={paginationProps}
        dataSource={list}
        renderItem={(item) => (
          <List.Item
            actions={[
              <a
                key="edit"
                onClick={(e) => {
                  e.preventDefault();
                  //showEditModal(item);
                }}
              >
                编辑
              </a>,
              // <MoreBtn key="more" item={item} />,
            ]}
          >
            <List.Item.Meta
              avatar={<Avatar src={item.logo} shape="square" size="large" />}
              title={<a href={item.href}>{item.title}</a>}
              description={item.subDescription}
            />
            <ListContent data={item} />
          </List.Item>
        )}
      />
    </div>
  )
}
